<template>
  <div>
    <Header></Header>


    <div style="width: 1500px;height: 394px;position: relative;padding: 0px">
      <div style="position: absolute;top: 100px;color: white;z-index: 999;left: 280px">
        <h1 style="font-size: 40px">课堂派面向全国招募合作伙伴</h1>
        <h4 style="font-size: 30px">中国领先的互动课堂管理平台，为高校提供智慧教学全过程管理服务</h4>
        <el-button style="font-size: 20px;color: #569fe0">立即咨询</el-button>
      </div>
      <el-image style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0px;left: 0px;z-index: 9;"
                src="https://www.ketangpai.com/Public/Home/img/home-channel-banner.png"></el-image>
    </div>
    <!--<div style="width: 1200px;height:93px;border: black solid 2px;">-->

    <!--</div>-->
    <el-menu mode="horizontal" id="h">
      <a href="#box1">
        <el-menu-item style="margin-left: 150px" class="cooperationbox2" index="1"><img src="src/assets/1.png"> 我们的优势
        </el-menu-item>
      </a>
      <a href="#box2">
        <el-menu-item class="cooperationbox2" index="2"><img style="margin-right: 4px" src="src/assets/2.png">合作优势
        </el-menu-item>
      </a>
      <a href="#box3">
        <el-menu-item class="cooperationbox2" index="3"><img style="margin-right: 4px" src="src/assets/3.png">合作条件
        </el-menu-item>
      </a>
      <a href="#box4">
        <el-menu-item class="cooperationbox2" index="4"><img style="margin-right: 4px" src="src/assets/4.png">合作方式
        </el-menu-item>
      </a>
    </el-menu>

    <div id="box1" class="cooperationbox3">
    </div>
    <div class="cooperationbox4">
      <div>
        <img src="src/assets/5.png">
        <h2>教育部推荐平台</h2>
        <p>源自北京大学，教育部高等教育司疫情期间发布的支持高校在线教学的课程资源和技术平台的37家平台之一；教育部语用司指定语言培训平台；助力全国高校在线教学，不停学，不停教。</p>
      </div>
      <div>
        <img src="src/assets/6.png">
        <h2>线上线下教学全过程管理</h2>
        <p>无需安装，轻松上手。提供丰富的课堂互动创新场景，引领课堂教学改革；覆盖备课、课前、课中、课后、管理等智慧教学全过程；支撑线下、线上、混合金课、直播、培训、会议等新教育模式。</p>
      </div>
      <div>
        <img src="src/assets/7.png">
        <h2>“互联网+”智慧校园</h2>
        <p>解决学生从入学到就业全景智慧教学生态，提供智慧教务、智慧教学、智慧教室、教师教学发展、实践教学、质量认证与诊改整体智慧校园解决方案；提供系统定制、数据对接服务。</p>
      </div>
      <div>
        <img src="src/assets/8.png">
        <h2>“互联网+”智慧校园</h2>
        <p>携手北京大学华文慕课和知名院校，提供慕课、直播公开课、培训等精品课程，建设专业学科共享联盟；面向教育机构提供精品课程、精品资源等“内容+平台+培训”全流程服务。</p>
      </div>
    </div>


    <div id="box2" class="cooperationbox5">
    </div>
    <div class="cooperationbox6">
      <div>
        <h1>丰厚返利</h1>
        <p>高回报返利返利体系
          供季/年度优秀代理商激励多元化产品支持保障
          合作伙伴稳定权益</p>
      </div>
      <div>
        <h1>体系化培训</h1>
        <p>定期线上产品培训
          实时同步产品最新动态
          期线下交流和沙龙
          线下渠道经理走访辅导
          及时解决市场问题</p>
      </div>
      <div>
        <h1>市场支持</h1>
        <p>产品画册、四折页等物料
          营销方案，售前方案支持
          专属授权服务商挂牌
          拓客话术等销售资料
          市场销售和运营培训</p>
      </div>
      <div>
        <h1>服务支持</h1>
        <p>7*24小时在线人工服务
          快速响应，所需即所得
          专属售前工程师对点服务
          个性化定制服务</p>
      </div>
      <div>
        <h1>秩序规范</h1>
        <p>价格体系统一
          报备机制严明
          营造良好生态环境</p>
      </div>
    </div>

    <div id="box3" class="cooperationbox7">
    </div>
    <div id="box4" class="cooperationbox8">
      <div>
        <img src="src/assets/9.png">
        <h1>具有公司资质</h1>
        <p>有营业执照和良好的商业信誉</p>
      </div>
      <div>
        <img src="src/assets/10.png">
        <h1>具有行业资源</h1>
        <p>有教育行业和高校的资源</p>
      </div>
      <div>
        <img src="src/assets/11.png">
        <h1>具有技术能力</h1>
        <p>有一定的研发能力和接单能力</p>
      </div>
    </div>

    <div class="footer">
      <div class="footer-box1">
        <div class="logo">
          <img width="127px" height="36px" src="https://www.ketangpai.com/Public/Home/img/logo.png">
        </div>
        <div class="link">
          <a href="https://www.ketangpai.com/index/abouts.html">关于我们</a>
          <a href="https://www.ketangpai.com/index/contact.html">联系我们</a>
          <a href="https://www.ketangpai.com/index/service.html">服务条款</a>
          <a href="https://www.ketangpai.com/index/older.html">浏览器下载</a>
          <a href="https://www.ketangpai.com/index/updateDynamics">更新动态</a>
        </div>
        <div class="contact">
          <div style="float: left">
            <p style="margin-top: 80px;color: #818181">电话咨询</p>
            <p style="margin-top: 25px;color: white;font-size: 28px">136-2128-1921</p>
          </div>
          <img style="margin-top: 40px;margin-left: 10px;float: left" width="130px" height="130px;"
               src="https://www.ketangpai.com/Public/Home/img/consult-QR.png">
        </div>
      </div>
    </div>
    <div class="footer-box2">
      <p>Copyright © 2014 ketangpai.com All Rights Reserved. 京ICP备14023276号-4</p>
    </div>
    <div class="footer-box3">
      <a
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402010566">京公网安备&nbsp11011402010566号</a>
    </div>
  </div>
</template>


<script>
  import Header from "../../components/Header";
  import Footer1 from "../../components/Footer1";

  export default {
    name: "Cooperation",
    components: {
      Header,
      Footer1,

    }

  }

</script>

<style scoped>
  .cooperationbox2 {
    width: 300px;
    height: 80px;
    font-size: 25px;
    color: black;
    padding: 0px;
    padding-top: 10px;
  }

  .cooperationbox2:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: white !important;
  }

  .cooperationbox3 {
    width: 1500px;
    height: 254px;
    background: url("https://www.ketangpai.com/Public/Home/img/channel-banner01.jpg") no-repeat center;
  }

  .cooperationbox4 {
    width: 1350px;
    height: 348px;
    background-color: white;
  }

  .cooperationbox4 div {
    width: 300px;
    height: 346px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
  }

  .cooperationbox4 div p {
    text-align: left;
    padding-top: 30px;
  }

  .cooperationbox5 {
    width: 1500px;
    height: 254px;
    background: #f8f8f7 url("https://www.ketangpai.com/Public/Home/img/channel-banner02.jpg") no-repeat center;
  }

  .cooperationbox6 {
    width: 1500px;
    height: 348px;
    background-color: #f8f8f7;
    padding-left: 50px;
  }

  .cooperationbox6 div {
    width: 250px;
    height: 280px;
    margin-left: 20px;
    border-bottom: #db9a22 solid 4px;
    float: left;
    background-color: white;
  }

  .cooperationbox6 div h1 {
    font-weight: 500;
    color: #569fe0;
  }

  .cooperationbox6 div p {
    text-align: left;
    padding: 20px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: larger;
  }

  .cooperationbox7 {
    width: 1500px;
    height: 254px;
    background: white url("https://www.ketangpai.com/Public/Home/img/channel-banner03.jpg") no-repeat center;
  }

  .cooperationbox8 {
    width: 1500px;
    height: 412px;
    padding-left: 120px;
  }

  .cooperationbox8 div {
    width: 400px;
    height: 312px;
    border: black solid 1px;
    border-radius: 10px;
    float: left;
    margin-left: 20px;
    padding-top: 60px;
  }

  .cooperationbox8 div h1 {
    margin-top: 40px;
    font-weight: 500;
  }

  .cooperationbox8 div p {
    margin-top: 30px;
    font-size: larger;
  }

  #h a {
    text-decoration: none;
    color: black;
    float: left;
  }

  .footer {
    width: 1520px;
    height: 220px;
    background: linear-gradient(#0a1632, #162b56);
    text-align: left;
    position: relative;
  }

  .footer-box1 {
    width: 980px;
    height: 170px;
    margin-left: 260px;
  }

  .footer-box1 .logo {
    width: 127px;
    height: 36px;
    /*background: url('https://www.ketangpai.com/Public/Home/img/logo.png') center no-repeat;*/
    margin-bottom: 40px;
    position: absolute;
    top: 50px;
    left: 280px;

  }

  .link {
    position: absolute;
    top: 130px;
    left: 280px;
  }

  .link a {
    float: left;
    text-decoration: none;
    color: white;
    margin-right: 40px;
  }

  .link a:hover {
    color: #32BAF0;
  }

  .contact {
    width: 349px;
    height: 170px;
    position: absolute;
    top: 0px;
    right: 240px;
  }

  .footer-box2 {
    width: 1520px;
    height: 48px;
    background-color: black;
    text-align: center;
    position: relative;
  }

  .footer-box2 p {
    position: absolute;
    color: white;
    left: 460px;
  }

  .footer-box3 {
    width: 1520px;
    height: 60px;
    background-color: lightgray;
    position: relative;
  }

  .footer-box3 a {
    text-decoration: none;
    color: #939393;
    cursor: pointer;
    position: absolute;
    top: 20px;
    width: 300px;
    right: 610px;
  }
</style>

